<template>
  <div class="edu-page-warp data-dictionary">
    <div class="edu-page-title">{{ $t('system.dataDictionary') }}</div>
    <el-tabs v-model="activeTab"
      @tab-click="handleFindDictTypes">
      <el-tab-pane v-for="topLevel in topLevelList"
        :key="topLevel.key"
        :label="topLevel.key"
        :name="topLevel.value">
      </el-tab-pane>
    </el-tabs>
    <div class="clear-both">
      <div class="left-part-box bg-white">
        <div class="">

          <p class="tree-title">
            <span>{{ $t('system.dictionaryTypeList') }}</span>
            <el-button type="text" size="mini" @click="addDict()">{{$t('message.add')}}</el-button>
          </p>
          <div v-if="dictTree && dictTree.length > 0" class="export-container">
            <el-button type="primary" @click="batchExport">{{$t('dic.btn.batchExport')}}</el-button>
            <span v-if="!isExportChecked" class="export-unchecked">{{$t('dic.unchecked')}}</span>
          </div>
          <el-tree
            :data="dictTree"
            :props="defaultProps"
            :expand-on-click-node="false"
            show-checkbox
            node-key="id"
            @check="exportCheck"
            @node-click="handleNodeClick" >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span :class="data.type == queryDictForm.type ? 'color-main': ''"
                :title="node.label">
                {{ getLabelStr(node.label) }}
              </span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => editType(node, data)"
                >{{$t('message.edit')}}</el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="right-part-box">
        <!-- <div class="edu-page-title">{{ $t('message.filterCondition') }}</div> -->
        <div>
          <el-card shadow="never" id="el_card1">
            <el-form class="dict-search-form" :inline="true" :model="queryDictForm">
              <el-form-item :label="$t('dataDictionary.code')">
                <el-input v-model="queryDictForm.code" :placeholder="$t('pla.plsInputCode')"/>
              </el-form-item>
              <el-form-item :label="$t('dataDictionary.nameCN')">
                <el-input v-model="queryDictForm.nameCN" :placeholder="$t('pla.pleaseInput')"/>
              </el-form-item>
              <el-form-item class="float-right no-bottom no-right">
                <el-button @click="reset">{{$t('message.reset')}}</el-button>
                <el-button type="primary" @click="onSubmit">{{$t('message.filter')}}</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <!-- <div class="edu-page-title mg-top">{{ $t('system.dataDictionaryList') }}</div> -->
        <el-card shadow="never" body-style="padding: 24px;" id="el_card2">
          <div class="edu-opertion-bar">
            <div class="float-right">
              <el-button @click="addDictByTpye" type="primary">{{$t('message.add')}}</el-button>
              <!-- <el-button @click="showDeleteDict">{{ $t('message.delete') }}</el-button> -->
              <!-- <el-button @click="refreshCache" type="primary">{{ $t('common.btn.refreshCache')}}</el-button> -->
              <el-button @click="exportSelectedType" type="primary">{{ $t('dic.btn.exportCurrent')}}</el-button>
            </div>
          </div>
          <el-table :data="Dicts" size="mini" tooltip-effect="light" stripe>
            <!-- <el-table-column type="selection"></el-table-column> -->
            <el-table-column show-overflow-tooltip :label="$t('dataDictionary.type')" prop="type">
              <!-- <template slot-scope="scope">
                <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                  :content="scope.row.type" >
                  <span slot="reference">{{scope.row.type}}</span>
                </el-popover>
                </template> -->
            </el-table-column>
            <el-table-column show-overflow-tooltip :label="$t('dataDictionary.code')">
              <template slot-scope="scope">{{scope.row.code}}</template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="管理部门">
              <template slot-scope="scope">{{scope.row.levelTypeI18n}}</template>
            </el-table-column>
            <el-table-column show-overflow-tooltip :label="$t('dataDictionary.nameCN')" prop="nameCN">
              <!-- <template slot-scope="scope">
                  <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                  :content="scope.row.nameCN">
                  <span slot="reference">{{scope.row.nameCN}}</span>
                </el-popover>
                </template> -->
            </el-table-column>
            <el-table-column show-overflow-tooltip :label="$t('dataDictionary.remark')" prop="remark">
              <!-- <template slot-scope="scope">
                  <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                  :content="scope.row.remark">
                  <span slot="reference">{{scope.row.remark}}</span>
                </el-popover>
                </template> -->
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip :label="$t('dataDictionary.shortNameCN')">
              <template slot-scope="scope">{{scope.row.shortNameCN}}</template>
            </el-table-column> -->
            <el-table-column show-overflow-tooltip :label="$t('dataDictionary.nameEN')" prop="nameEN">
              <!-- <template slot-scope="scope">
                <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                  :content="scope.row.nameEN">
                  <span slot="reference"> {{scope.row.nameEN}}</span>
                </el-popover>
                </template> -->
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip :label="$t('dataDictionary.shortNameEN')">
              <template slot-scope="scope">{{scope.row.shortNameEN}}</template>
            </el-table-column> -->
            <el-table-column show-overflow-tooltip :label="$t('dataDictionary.creator')">
              <template slot-scope="scope">{{scope.row.creator}}</template>
            </el-table-column>
            <el-table-column show-overflow-tooltip :label="$t('dataDictionary.createTime')">
              <template slot-scope="scope">{{ timestampToTime(scope.row.createTime) }}</template>
            </el-table-column>

            <el-table-column :label="$t('message.operating')" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="editDict(scope.row)">{{$t('message.edit')}}</el-button>
                <el-button type="text" @click="deleteDictByRow(scope.row.id)">{{$t('message.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="edu-pagination">
            <div class="float-right">
              <el-pagination
                :current-page="page.pageNum_"
                :page-sizes="[20,50,100,500,1000]"
                :page-size="page.pageSize_"
                :total="page.total"
                layout="total, sizes, prev, pager, next, jumper"
                style="float: right;margin:0;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      width="42%"
      :visible.sync="showDictDialog"
      @close="resetFormValidate()"
      :close-on-click-modal="false">
      <el-form :model="createDictForm" ref="createDictForm" label-width="90px" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('dataDictionary.type')" prop="type">
              <el-input v-model="createDictForm.type" v-if="isElectiveShow==0"></el-input>
              <el-input v-model="createDictForm.type" v-if="isElectiveShow==1" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('dataDictionary.code')" prop="code" v-if="isShow">
              <el-input v-model="createDictForm.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('dataDictionary.nameCN')" prop="nameCN" v-if="isShow">
              <el-input v-model="createDictForm.nameCN"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('dataDictionary.shortNameCN')"
              prop="shortNameCN"
              v-if="isShow">
              <el-input v-model="createDictForm.shortNameCN"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('dataDictionary.nameEN')" prop="nameEN" v-if="isShow">
              <el-input v-model="createDictForm.nameEN"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('dataDictionary.shortNameEN')"
              prop="shortNameEN"
              v-if="isShow">
              <el-input v-model="createDictForm.shortNameEN"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="管理部门：" v-if="isShow">
              <el-select multiple style="width: 100%"
                v-model="createDictForm.levelType"
                filterable
                collapse-tags
                placeholder="请选择管理部门">
                <el-option
                    v-for="(opt,index) in options.levelTypeList"
                    :key="index"
                    :label="opt.label"
                    :value="opt.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('dataDictionary.remark')" prop="remark" :rules="isElectiveShow ==1 && [rules.remark[0]] || rules.remark">
              <el-input v-model="createDictForm.remark" v-if="isElectiveShow==0"></el-input>
              <el-input v-model="createDictForm.remark" v-if="isElectiveShow==1" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="showDictDialog = false">{{$t('message.cancel')}}</el-button>
        <el-button type="primary" @click="createDict">{{$t('message.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  exportDictionaryList,
  insertDict,
  updateDict,
  deleteDictById,
  updateDictType,
  getDictById,
  getDictionarys,
  getDictList,
  refreshCache,
  findDictTypeByRelateType,
  queryDic
} from "common/src/api/dictionary";

const ELECTIVE_TYPE = {
  //对话框字典类型，0：可见/新增, 1：文本(显示文本不可修改)/修改, 2, 批量修改   公用魔法数字
  VISIBLE: 0,
  TEXT: 1,
  UPDATE: 2
};

const topLevelList = [{ key: '教育部标准', value: '1' }, { key: '行业标准', value: '2' },
{ key: '校标', value: '3' },{ key: '国标', value: '4' },{ key: '其他', value: '5' }];

export default {
  name: 'DataDictionary',
  data() {
    var valiCode = (rule, value, callback) => {
      var regex = /^[\w\d]{1,10}$/;
      if (regex.test(value)) {
        callback();
      } else {
        callback(new Error('字母或数字(1~10位)'));
      }
    };
    var valiType = (rule, value, callback) => {
      var regex = /^[\u4e00-\u9fa5()（）]+$/;
      if (regex.test(value)) {
        callback();
      } else {
        callback(new Error((this.$t('tip.CNTip')+'(4~15位)')));
      }
    };
    var valiCN = (rule, value, callback) => {
      var regex = /^[\u4e00-\u9fa5]{2,15}$/;
      if (regex.test(value)) {
        callback();
      } else {
        callback(new Error((this.$t('tip.CNTip')+'(2~15位)')));
      }
    };
    var valiNameCN = (rule, value, callback) => {
      var regex = /^[\u4e00-\u9fa5]{0,}$/;
      if (regex.test(value)) {
        callback();
      } else {
        callback(new Error((this.$t('dataDictionary.plsInputName'))));
      }
    };
    var valiNameEN = (rule, value, callback) => {
      var regex = /^[A-Za-z]+$/;
      if (regex.test(value)) {
        callback();
      } else {
        callback(new Error((this.$t('message.plsInputNameEn'))));
      }
    };
    return {
      checkedTypes: [],
      isExportChecked: false,
      activeTab: '1',
      topLevelList,
      showDictDialog: false,
      dialogTitle: '',
      isElectiveShow: ELECTIVE_TYPE.VISIBLE,
      isShow: true,
      isEdit: '',
      Dicts: [],
      page: {
        pageNum_: 0,
        pageSize_: 20,
        total: 0
      },
      queryDictForm: {
        id: null,
        relateType: '',
        type: '',
        code: '',
        nameCN: '',
        remark: '',
        shortNameCN: '',
        nameEN: '',
        shortNameEN: '',
        creator: '',
        createTime: null
      },
      dictTree: [],
      chooseDicts: [],
      defaultProps: {
        children: "children",
        label: "remark"
      },
      createDictForm: {
        id: '',
        type: '',
        levelType: [],
        code: '',
        nameCN: '',
        remark: '',
        shortNameCN: '',
        nameEN: '',
        shortNameEN: ''
      },
      editForm: {
        ids: [],
        condition: '',
        remark_: ''
      },
      rules: {
        type: [
          {
            required: true,
            message: this.$t('dataDictionary.plsInputType'),
            trigger: 'blur'
          },
        //   {
        //     validator: valiType,
        //     trigger: 'blur'
        //   }
        ],
        code: [
          {
            required: true,
            message:  this.$t('dataDictionary.plsInputCode'),
            trigger: 'blur'
          },
          {
            validator: valiCode,
            trigger: 'blur'
          }
        ],
        nameCN: [
          {
            required: true,
            message: this.$t('dataDictionary.plsInputName'),
            trigger: 'blur'
          }
        ],
        nameEN: [
          {
            required: true,
            message: this.$t('message.plsInputNameEn'),
            trigger: 'blur'
          }
        ],
        remark: [
          {
            required: true,
            message: this.$t('dataDictionary.plsInputRemark'),
            trigger: 'blur'
          },
          {
            validator: valiCN,
            trigger: 'blur'
          }
        ]
      },
      options: {
        levelTypeList: []
      },
      isTree: false,
      /*   functions: {} */
    };
  },
  created() {
    /*  this.$store.getters.getFuncUnderPage(this.$route.path).then(funcs => {
      this.functions = funcs;
    }); */
    this.queryDic();
  },
  mounted() {
    // 默认查询第一个(教育部标准)下的类型
    this.handleFindDictTypes({name: '1'});

  },
  methods: {
    async queryDic() {
      try {
        let params = {
          lang: this.$store.getters.language || 'cn',
          type: 'allChild',
          keys: ['X_GLBM']
        };
        let resp = await queryDic(params);
        if (resp && resp.data && resp.code == 200) {
          this.fillOption('levelTypeList', resp.data.X_GLBM);
        } else {
          this.$message({
            type: 'warning',
            message: '数据字典查询管理部门出错'
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    fillOption(type, data) {
      this.options[type] = [];
      for (let key in data) {
        this.options[type].push({
          value: key,
          label: data[key]
        });
      }
    },
    exportCheck(currentChecked, allChecked) {
      // console.log(allChecked, '++++++++++');
      const checkedKeys = allChecked.checkedKeys;
      const checkedTypes= allChecked.checkedNodes.map(item => item.type);
      this.checkedTypes = checkedTypes;
      if (checkedKeys && checkedKeys.length > 0) {
        this.isExportChecked = true;
      } else {
        this.isExportChecked = false;
      }
    },
    exportSelectedType() {
      exportDictionaryList(this.queryDictForm.type);
    },
    batchExport() {
      if (this.checkedTypes.length > 0 && this.isExportChecked) {
        exportDictionaryList(this.checkedTypes.join(','));
      }
    },
    handleFindDictTypes({name}) {
      const type = name;
      this.queryDictForm.relateType = name;
      this.isExportChecked = false;
      findDictTypeByRelateType(type).then(res => {
        if (res.code == 200) {
          this.dictTree = res.data;
          if (res.data && res.data.length > 0) {
            this.queryDictForm.type = res.data[0].type;
            this.queryDictForm.remark = res.data[0].remark;
          }
          this.queryDictList();
        }
      });
    },
    handleNodeClick(data, checked) {
      if (!data) return;
      this.queryDictForm.type = data.type;
      this.queryDictForm.remark = data.remark;
      this.queryDictList();
    },

    getLabelStr(str) {
      if (!str) return '';
      else return str.length > 10 ? str.substring(0, 10).concat('...') : str;
    },
    //重置添加数据字典对话框
    resetDictDialog() {
      this.createDictForm.id = '';
      this.createDictForm.type = '';
      this.createDictForm.levelType = [];
      this.createDictForm.code = '';
      this.createDictForm.nameCN = '';
      this.createDictForm.remark = '';
      this.createDictForm.shortNameCN = '';
      this.createDictForm.nameEN = '';
      this.createDictForm.shortNameEN = '';
      this.createDictForm.shortNameEN = '';
      this.showDictDialog = true;
      this.editForm.ids=[];
    },

    //得到对话框标题
    getdialogTitle(val) {
      if (val === 0) {
        return this.$t('dataDictionary.createDataDictionary');
      } else if (val === 1) {
        return this.$t('dataDictionary.editDataDictionary');
      } else {
        return this.$t('dataDictionary.editDataDicType');
      }
    },

    //树形表添加类型 可以添加类型
    addDict() {
      this.isShow = true;
      this.isEdit = ELECTIVE_TYPE.VISIBLE;
      this.isTree = true;
      this.dialogTitle = this.getdialogTitle(this.isEdit);
      this.isElectiveShow = ELECTIVE_TYPE.VISIBLE;
      this.resetDictDialog();
    },
    //不能添加类型
    addDictByTpye() {
      if (this.queryDictForm.type == null || this.queryDictForm.type == '') {
        this.$message({
          type: 'warning',
          message: this.$t('dataDictionary.chooseDictType')
        });
        return;
      }
      this.isShow = true;
      this.isEdit = ELECTIVE_TYPE.VISIBLE;
      this.dialogTitle = this.getdialogTitle(this.isEdit);
      this.isElectiveShow = ELECTIVE_TYPE.TEXT;
      this.resetDictDialog();
      this.createDictForm.relateType = this.queryDictForm.relateType;
      this.createDictForm.type = this.queryDictForm.type;
      this.createDictForm.remark = this.queryDictForm.remark;
    },
    //批量修改类型
    editType(node, data) {
      if (!data) return;
      this.isEdit = ELECTIVE_TYPE.UPDATE;
      this.dialogTitle = this.getdialogTitle(this.isEdit);
      this.isElectiveShow = ELECTIVE_TYPE.VISIBLE;
      this.resetDictDialog();
      this.isShow = false;
      getDictById(data.id).then(res => {
        if (res.code == 200) {
          this.createDictForm.type = res.data.type;
          this.createDictForm.remark = res.data.remark;
          this.editForm.ids.push(data.id);
        }
      });
    },
    //不能修改类型
    editDict(data) {
      if (!data) return;
      this.isEdit = ELECTIVE_TYPE.TEXT;
      this.dialogTitle = this.getdialogTitle(this.isEdit);
      this.isElectiveShow = ELECTIVE_TYPE.TEXT;
      this.isShow = true;
      this.resetDictDialog();
      getDictById(data.id).then(res => {
        if (res.code == 200) {
          this.createDictForm.id = res.data.id;
          this.createDictForm.relateType = res.data.relateType;
          this.createDictForm.type = res.data.type;
          this.createDictForm.code = res.data.code;
          this.createDictForm.levelType = res.data.levelType ? res.data.levelType.split(',') : [];
          this.createDictForm.nameCN = res.data.nameCN;
          this.createDictForm.remark = res.data.remark;
          this.createDictForm.shortNameCN = res.data.shortNameCN;
          this.createDictForm.nameEN = res.data.nameEN;
          this.createDictForm.shortNameEN = res.data.shortNameEN;
        }
      });
    },

    deleteDictByRow(id) {
      this.$confirm(
        this.$t('dataDictionary.delDataDict'),
        this.$t('message.prompt'),
        {
          confirmButtonText: this.$t('message.confirm'),
          cancelButtonText: this.$t('message.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.delDict(id);
      });
    },

    //批量删除字典表数据
    showDeleteDict() {
      if (this.chooseDicts.length == 0) {
        this.$message({
          type: 'info',
          message: this.$t('course.notSelectTip')
        });
        return;
      }
      this.$confirm(
        this.$t('dataDictionary.delDataDict'),
        this.$t('message.prompt'),
        {
          confirmButtonText: this.$t('message.confirm'),
          cancelButtonText: this.$t('message.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.delDict();
      });
    },
    delDict(id) {
      this.editForm.ids = [];
      if (id) {
        this.editForm.ids.push(id);
      } else {
        this.editForm.ids = this.chooseDicts.map(c => c.id);
        /*  for(let key in this.chooseDicts){
               this.editForm.ids.push(this.chooseDicts[key].id);
            } */
      }

      deleteDictById(this.editForm).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: this.$t('message.deleteSuccess')
          });
          this.queryDictList();
          this.handleFindDictTypes({name:this.queryDictForm.relateType})
          // this.showdictTree();
        }
      });
    },
    refreshCache(){
      refreshCache().then(res => {
        this.$message({
            type: 'success',
            message: this.$t('common.tips.opSuccess')
          });
      });
    },
    queryDictList() {
      getDictList(
        this.page.pageNum_,
        this.page.pageSize_,
        this.queryDictForm
      ).then(res => {
        if (res.code == 200) {
          this.Dicts = res.data.list;
          this.page.pageNum_ = res.data.pageNum_;
          this.page.pageSize_ = res.data.pageSize_;
          this.page.total = res.data.total_;
        } else throw res.code;
      });
    },
    handleCurrentChange(val) {
      this.page.pageNum_ = val;
      this.queryDictList();
    },
    handleSizeChange(val) {
      this.page.pageSize_ = val;
      this.queryDictList();
    },

    //重新加载
    reload() {
      this.showDictDialog = false;
      // this.queryDictForm.type='';
      // this.queryDictForm.remark='';
      this.isEdit = '';
      this.queryDictList();
      // this.showdictTree();
    },
    createDict() {
      this.$refs.createDictForm.validate(valid => {
        if (!valid) {
          return;
        }
        if (this.isEdit === 0) {
            if(this.isTree){
                this.createDictForm.levelType = this.createDictForm.levelType.join(',')
                let createDictForm = _.cloneDeep(this.createDictForm)
                createDictForm.relateType = this.queryDictForm.relateType
                insertDict(createDictForm).then(res => {
                    if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('message.addSuccess')
                    });
                    this.isTree = false
                    this.showDictDialog = false;
                    this.handleFindDictTypes({name:createDictForm.relateType})
                    }
                });
            }else{
                this.createDictForm.levelType = this.createDictForm.levelType.join(',')
                insertDict(this.createDictForm).then(res => {
                    if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('message.addSuccess')
                    });
                    this.reload();
                    }
                });
            }
        } else if (this.isEdit === 1) {
          this.createDictForm.levelType = this.createDictForm.levelType.join(',');
          updateDict(this.createDictForm).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: this.$t('message.editSuccess')
              });
              this.reload();
            }
          });
        } else {
          this.$confirm(
             this.$t('dataDictionary.editDataDictType'),
            this.$t('message.prompt'),
            {
              confirmButtonText: this.$t('message.confirm'),
              cancelButtonText: this.$t('message.cancel'),
              type: 'warning'
            }
          ).then(res => {
            this.editForm.condition = this.createDictForm.type;
            this.editForm.remark_ = this.createDictForm.remark;
            let createDictForm = _.cloneDeep(this.editForm)
            createDictForm.relateType = this.queryDictForm.relateType
            updateDictType(createDictForm).then(res => {
                    if(res.code==200){
                        this.$message({
                            type: 'success',
                            message: this.$t('message.editSuccess')
                        });
                        this.handleFindDictTypes({name:createDictForm.relateType})
                        this.reload();
                    }
                });
          });
        }
      });
    },

    onSubmit() {
      this.queryDictList();
    },
    reset() {
      this.queryDictForm.code = '';
      this.queryDictForm.nameCN = '';
      this.queryDictList();
    },
    timestampToTime(timestamp) {
      if (timestamp == null || timestamp == '') return '';
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M =
        (date.getMonth() + 1 < 10
          ? '0 ' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      let D = date.getDate() + ' ';
      let h = date.getHours() + ': ';
      let m = date.getMinutes() + ': ';
      let s = date.getSeconds();
      return Y + M + D + h + m + s;
    },

    //选择复选框
    chooseDictionary(val) {
      this.chooseDicts = val;
    },
    // 清除表单校验
    resetFormValidate() {
      this.$refs.createDictForm.resetFields();
    },

    showdictTree() {
      getDictionarys().then(res => {
          if (res.code == 200) {
              this.dictTree = this.$utils.listToTree('id', 'type', res.data);
          } else throw res.code;
      }).catch(error => {
        console.log(error);
      });
    }
  }
  /* watch: {
    showDictDialog: function(_old, _new) {
      if (!_new) this.$refs.createDictForm.resetFields();
    }
  } */
};
</script>
<style lang="scss">
.top-level-list {
  .el-tabs__item.is-active {
    background: #fff;
  }
}
.data-dictionary .el-tree-node__expand-icon.is-leaf {
  display: none;
}
</style>
<style lang="scss" scoped>
.left-part-box,
.right-part-box {
  float: left;
}
.left-part-box {
  width: 300px;
  padding: 13px;
  box-sizing: border-box;
  margin-right: 20px;
  .el-tree {
    max-height: 500px;
    overflow: hidden auto;
    height: 700px;
    width: 100%;
    border: 1px solid #ececec;
    padding: 5px 10px;
    box-sizing: border-box;
  }
  .export-container {
    padding-bottom: 10px;
    padding-left: 8px;
  }
  .export-unchecked {
    font-weight: 700;
    color: #FF0000;
    padding-left: 5px;
  }
}

.dict-search-form .el-form-item {
  margin-bottom: 0;
}

#el_card2 {
  min-height: 450px;
  margin-top: 10px;
}
.right-part-box {
  width: calc(100% - 320px);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 4px;
  color: #3f3f3f;
}
.item-title {
  display: block;
  width: 100%;
  height: 32px;
}
.tree-title {
  margin: 0;
  line-height: 28px;
  padding-left: 8px;
  .el-button {
    float: right;
    margin-right: 4px;
  }
}
</style>
